<template>
    <ul>    
        <Titlebar/>
            <li v-for="list in $store.state.Friendslist"  
                @click="tiaozhuan(list)"
                style="background-color: #FFFFFF;
                background-size: 100% 100%;
                width: 100%;height: 60px;
                border-bottom: 1px solid honeydew;float: left;">

                <img :src="list.uimg" 
                    style="width: 40px;
                    height: 40px;margin-left: 3%;
                    margin-top: 3%;
                    margin-bottom: 3%;
                    border-radius: 3px;
                    float: left;
                    background-repeat:no-repeat;">

                <p style="font: 3px;
                    margin-top: 3%;
                    margin-left: 15%;">{{list.uname}}
                </p>

                <p style="font-size: 0.1px;
                    color: #B3B3B3;margin-left: 15%;
                    margin-top: 1%;">{{list.zuixinxiaoxi}}
                </p>
            </li>
        </ul>
</template>

<script>

import Titlebar from '../components/Titlebar.vue'
export default {
    name:'List',
    components:{Titlebar},
    data() {
        return {
            
            
        }
    },
    methods:{
        tiaozhuan(list){
            console.log(list);
            this.$router.push({
                path:'/chatpage',
            })
            this.$store.state.list=list
        }
    },
    mounted(){
        const options = {
          method: 'GET',
          headers: {
            "Content-Type": 'application/json'
          }
        }
        fetch(`http://8.130.95.37:8085/getFriends/${localStorage.getItem("name")}`, options).then(res => res.json()).then(res => {
          console.log(res);
          this.$store.state.Friendslist=res
        }).catch(err => {
          console.log(err)
        })
    }
    
    
}
</script>


<style scoped>

</style>
